<template>
	<div>
		<van-swipe-cell v-for="v in car" :key="v.id">
			<van-card :price="v.price.toFixed(2)" :desc="v.desc" :title="v.title" :thumb="v.url">
				<template #num>
					<van-stepper
						v-model="v.count"
						@plus="store.commit('addCar', v)"
						@minus="store.commit('subCar', v)"
					/>
				</template>
			</van-card>
			<template #right>
				<van-button square text="删除" type="danger" class="delete-button" @click="store.commit('subCar', v)" />
			</template>
		</van-swipe-cell>
	</div>
</template>


<script setup lang="ts">
import { useStore } from 'vuex'
import { StateType } from '@/store'
import { computed } from 'vue';
const store = useStore<StateType>()
const car = computed(() => store.state.car)
</script>


<style>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>
